<template>
  <el-dialog
      v-model="visible"
      :title="title"
      width="600px"
      append-to-body
      :before-close="close"
  >
    <el-form
        :model="editForm"
        ref="editFormRef"
        label-width="80px"
        :rules="rules"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="租户Id" prop="tenantId">
            <el-input
                type="textarea"
                :rows="2"
                v-model="editForm.tenantId"
                placeholder="请输入租户Id"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="名称" prop="name">
            <el-input
                v-model="editForm.name"
                placeholder="请输入名称"
                maxlength="30"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务类型" prop="jobType">
            <el-select v-model="editForm.triggerType" placeholder="请输入名称" maxlength="30">
              <dictionary-option code="jobType"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div v-if="editForm.triggerType == '3'">
        <el-row>
          <el-col :span="12">
            <el-form-item label="任务Id" prop="tenantId">
              <el-select
                  v-model="editForm.jobIds"
                  multiple
                  collapse-tags
                  collapse-tags-tooltip
                  :max-collapse-tags="3"
                  placeholder="请选择任务"
                  style="width: 240px"
              >
                <el-option
                    v-for="item in jobs"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div v-if="editForm.triggerType != '3'">
        <el-row>
          <el-col :span="12">
            <el-form-item label="条件" prop="conditionId">
              <el-select
                  v-model="editForm.conditionId" clearable
                  placeholder="请选择条件">
                <el-option
                    v-for="(category, index) in conditionList"
                    :key="index"
                    :label="category.name"
                    :value="category.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="触发时间" prop="triggerTime">
              <el-date-picker
                  v-model="editForm.triggerTime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  type="datetime"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="源DB" prop="fromDb">
              <el-select
                  v-model="editForm.fromDb"
                  placeholder="请选择源DB">
                <el-option
                    v-for="(category, index) in dbDataList"
                    :key="index"
                    :label="category.name"
                    :value="category.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目标DB" prop="toDb">
              <el-select
                  v-model="editForm.toDb"
                  placeholder="请选择目标DB">
                <el-option
                    v-for="(db, index) in dbDataList"
                    :key="index"
                    :label="db.name"
                    :value="db.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="状态" prop="jobStatus">
              <el-select v-model="editForm.status" placeholder="请选择状态" maxlength="30">
                <dictionary-option code="jobStatus"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Step" prop="triggerTime">
              <el-input-number v-model="editForm.step" :step="10"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="间隔" prop="interval">
              <el-input-number v-model="editForm.interval" :step="10"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="syncDataType">
              <el-select v-model="editForm.type" placeholder="请输入名称" maxlength="30">
                <dictionary-option code="syncDataType"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="源执行前SQL" prop="fromDbBeforeSql">
              <el-input
                  type="textarea"
                  :rows="2"
                  v-model="editForm.fromDbBeforeSql"
                  placeholder="请输入SQL，注意不能为查询语句，多个用‘;’分割"
                  width="200px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="源执行后SQL" prop="fromDbAfterSql">
              <el-input
                  type="textarea"
                  :rows="2"
                  v-model="editForm.fromDbAfterSql"
                  placeholder="请输入SQL，注意不能为查询语句，多个用‘;’分割"
                  width="200px"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="源执行错误SQL" prop="fromDbErrorSql">
              <el-input
                  type="textarea"
                  :rows="2"
                  v-model="editForm.fromDbErrorSql"
                  placeholder="请输入SQL，注意不能为查询语句，多个用‘;’分割"
                  width="200px"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="目标执行前SQL" prop="toDbBeforeSql">
              <el-input
                  type="textarea"
                  :rows="2"
                  v-model="editForm.toDbBeforeSql"
                  placeholder="请输入SQL，注意不能为查询语句，多个用‘;’分割"
                  width="200px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="目标执行后SQL" prop="toDbAfterSql">
              <el-input
                  type="textarea"
                  :rows="2"
                  v-model="editForm.toDbAfterSql"
                  placeholder="请输入SQL，注意不能为查询语句，多个用‘;’分割"
                  width="200px"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="目标执行错误SQL" prop="toDbErrorSql">
              <el-input
                  type="textarea"
                  :rows="2"
                  v-model="editForm.toDbErrorSql"
                  placeholder="请输入SQL，注意不能为查询语句，多个用‘;’分割"
                  width="200px"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {getCurrentInstance, ref} from 'vue'
import {add, conditionListGet, dbListGet, getById, jobListGet, update} from '@/api/sync/job'

const {proxy} = getCurrentInstance()

const conditionList = ref([])
const dbDataList = ref([])
const visible = ref(false)
const title = ref('')
const jobs = ref([])
const rules = ref({
  name: [{required: true, message: '名称不能为空', trigger: 'blur'}],
  triggerType: [{required: true, message: '任务类型不能为空', trigger: 'blur'}],
  type: [{required: true, message: '类型不能为空', trigger: 'blur'}]
})
const editForm = ref({
  id: undefined,
  conditionStr: undefined,
  triggerTime: '',
  type: '0',
})

/**
 * 显示弹窗
 */
async function show(id, isCopy) {
  visible.value = true
  if (id) {
    const {data} = await getById(id);
    editForm.value = data
    editForm.value.status = editForm.value.status + ''
    editForm.value.triggerType = editForm.value.triggerType + ''
    editForm.value.type = editForm.value.type + ''
    editForm.value.tablestr = data.tableList
    if (isCopy) {
      title.value = '复制同步任务'
      editForm.value.id = undefined
    } else {
      title.value = '修改同步任务'
    }
  } else {
    title.value = '新增同步任务'
    editForm.value.id = undefined
  }
  getConditions()
  getDbs()
  getJobs()
}

async function getConditions() {
  const {data} = await conditionListGet()
  conditionList.value = data
}

async function getDbs() {
  const {data} = await dbListGet()
  dbDataList.value = data
}

async function getJobs() {
  const {data} = await jobListGet()
  jobs.value = data
}

/**
 * 关闭
 */
function close() {
  visible.value = false
  reset()
}

/**
 * 重置
 */
function reset() {
  proxy.resetForm('editFormRef')
}

/**
 * 提交数据
 */
const emit = defineEmits(null)

function handleSave() {
  proxy.$refs.editFormRef.validate(async (valid) => {
    if (valid) {
      // 修改
      if (editForm.value.triggerType === 3) {
        editForm.value.type = 0;
      }
      if (editForm.value.id) {
        await update(editForm.value);
        proxy.$modal.msgSuccess('修改成功');
      } else {
        // 新增
        await add(editForm.value);
        proxy.$modal.msgSuccess('新增成功');
      }
      emit('fetch-data')
      close()
    }
  })
}

defineExpose({
  show
})
</script>
